<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .style {
        font-style: italic;
      }
      .red {
        background: red;
      }
      .yellow {
        color: yellow;
      }
      .bold {
        font-weight: bold;
      }
      .bd {
        border: 1px solid #000;
      }
      .active {
        box-shadow: 3px 3px 3px 3px pink;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 当类名是通过数据来控制是否添加的时候，使用动态类。 -->

      <!-- 
        情况1：当动态类只有一个类的时候，我们可以直接使用三元等表达式，返回一个字符串即可。 
      -->
      <div class="style" :class="isMove?'active':''">案例1</div>
      <div class="style" :class="className">案例2</div>

      <!-- 
        情况2：当动态类的类有一个或者多个的时候(固定个数)，我们可以给动态类设置一个对象，每一个类名都是对象的key，值是一个布尔值代表是否开启当前的类。 
      -->
      <div class="style" :class="{active:isActive,bold:isMove,bd:isHover}">
        案例3
      </div>

      <!-- 
        情况3：当动态类的类有一个或多个的时候（不确定数），可以使用数组，只要在数组中的类都会添加到DOM上，不能开启和关闭，但是可以操作数组来控制类。
       -->

      <div class="style" :class="classArr">案例4</div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isMove: true,
            isActive: true,
            isHover: true,
            className: "active",
            classArr: ["active", "bd", "bold"],
          };
        },
      });
    </script>
  </body>
</html>
